import { useRequest, useUpdateEffect } from 'ahooks'
import { Card, Space, Timeline } from 'antd'

import { Texty } from '@/components/Texty'
import { VCenterEmpty } from '@/components/VCenterEmpty'
import { useControllerRef } from '@/hooks/useAbortController'
import { emptyDesc } from '../../utils'
import { withDelayRequest } from '../utils'
import { apiGetAddressMsg, apiGetOrderProductBoxInfo } from './apis'
import styles from './styles.module.less'

const getAddressMsg = withDelayRequest(apiGetAddressMsg)
const getOrderProductBoxInfo = withDelayRequest(apiGetOrderProductBoxInfo)

export const Address = ({ waybillNo }: { waybillNo: string }) => {
  const controllerRef = useControllerRef()
  const { loading, data, mutate, run } = useRequest(() => {
    mutate(undefined)
    controllerRef.current.abort()
    controllerRef.current = new AbortController()
    return Promise.all([
      getAddressMsg(waybillNo, controllerRef.current.signal),
      getOrderProductBoxInfo(waybillNo, controllerRef.current.signal),
    ])
  })
  const [addressInfo, productBoxInfo] = data || []

  useUpdateEffect(() => run(), [waybillNo])

  return (
    <Card style={{ minHeight: 300 }} className={styles.card} title="Address" loading={loading}>
      {!addressInfo || !productBoxInfo ? (
        VCenterEmpty.render({ description: emptyDesc, style: { minHeight: 300 * 0.7 } })
      ) : (
        <>
          <Timeline
            items={[
              {
                children: (
                  <div className={styles.contain}>
                    <div className={styles.title}>
                      {addressInfo.supplierWarehouse} <span>{addressInfo.supplierCountry}</span>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.temp}>
                        <Texty>{addressInfo.supplierAddress}</Texty>
                      </div>
                    </div>
                  </div>
                ),
              },
              {
                children: (
                  <div className={styles.contain}>
                    <div className={styles.title}>
                      {addressInfo.destinationCode} <span>{addressInfo.destinationCountry}</span>
                    </div>
                    <div className={styles.text}>
                      <span>
                        <Texty>{addressInfo.destinationAddress || '--'}</Texty>
                      </span>
                    </div>
                  </div>
                ),
              },
            ]}
          />
          <Space style={{ width: '100%', justifyContent: 'space-between' }} className={styles.footer}>
            <div className={styles.footer_item}>
              <div className={styles.text}>Total boxes</div>
              <div>
                <span className={styles.num}>{productBoxInfo.boxNum}</span> CTNS
              </div>
            </div>
            <div className={styles.footer_item}>
              <div className={styles.text}>Total weight</div>
              <div>
                <span className={styles.num}>{productBoxInfo.weight}</span> KGS
              </div>
            </div>
            <div className={styles.footer_item}>
              <div className={styles.text}>Total volume</div>
              <div>
                <span className={styles.num}>{productBoxInfo.volume}</span> CBM
              </div>
            </div>
          </Space>
        </>
      )}
    </Card>
  )
}
